var vm = new Vue({
    el:"#app",
    data() {
    	return {
    		ri:'',
    		yue: '',
    		nian: '',
    		hour: '',
    		seconds: '',
    		minutes: '',
    		day: '',
    		week: '',
    		day:'',
    		time: '',
    		years: '',
    		tableList: [],
    		oldPeople: '',
    		juWei: '',
    		juweiHeader: '惠南镇老人分布',
    		serviceOne: '',
    		serviceTwo: '',
    		serviceThree: '',
    		serviceFour: '',
    		serviceFive: '',
			serviceSix: '',
			zhucandian: '',
			laonianhuodong: '',
			weilaofuwu: '',
			fuwudanwei: ''
    	}
    },
   mounted() {
   	this.showTime();
   	this.showTable();
// 	this.showHeader();
   	this.showOldPeopleCount();
   	this.showJuWei();
   	this.showCircle();
    this.showService();
    this.showFourService();
   },
   methods: {
   	showTime() {
   		var date = new Date();
   	
   		this.day = date.getDay();
   		this.yue = date.getMonth() + 1;
   		this.nian = date.getFullYear();
   		this.hour = date.getHours();
   		this.minutes = date.getMinutes();
   		this.seconds = date.getSeconds();
   		var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
   		this.week = weekday[this.day];
   		this.ri = date.getDate()
   	
   		if (this.hour < 10) {
   			this.hour = '0' + this.hour
   		}
   		if (this.minutes < 10) {
   			this.minutes = '0' + this.minutes
   		}
   		if (this.seconds < 10) {
   			this.seconds = '0' + this.seconds
   		}
   		if (this.yue < 10) {
   			this.yue = '0' + this.yue
   		}
   		if (this.ri < 10) {
   			this.ri = '0' + this.ri
   		}
   		this.time = `${this.hour}:${this.minutes}:${this.seconds}`
   		this.years = `${this.nian}/${this.yue}/${this.ri}`
   		setTimeout(() => {
   		this.showTime();
   	},1000)
   	},
   	showTable() {
   		var _this = this
   		$.ajax({
   			url:"/kjzl/sceen/sceenHuiNanAction_loadjwzb.action",
   			dataType: 'json',
   			success: function(data) {
   				if (data.code === 200) {
   					_this.tableList = data.data
   				}
   				else {
   					console.log(data.code)
   				}
   			}
   		});
   	},
   	showOldPeopleCount() {
   		var _this = this
   		$.ajax({
   			url:"/kjzl/sceen/sceenHuiNanAction_loadzrs.action",
   			dataType: 'json',
   			success: function(data) {
   				if (data.code === 200) {
   					_this.oldPeople = data.data.zrs
   				}
   				else {
   					console.log(data.code)
   				}
   			}
   		});
   	},
   	showJuWei() {
   		var _this = this
   		$.ajax({
   			url:"/kjzl/sceen/sceenHuiNanAction_loadjw.action",
   			dataType: 'json',
   			success: function(data) {
   				if (data.code === 200) {
   					_this.juWei = data.data.jwCount
   				}
   				else {
   					console.log(data.code)
   				}
   			}
   		});
   	},
   	showCircle() {
   		$.ajax({
   			url:"/kjzl/sceen/sceenHuiNanAction_loadCountByAge.action",
   			dataType: 'json',
   			success: function(datas) {
   				
                const arr =  []
                for (let i in datas.data) {
                    arr.push(datas.data[i])
                }
   				if (datas.code === 200) {
   					 var data = [
                    {value:2, name:'60-65岁老人'},
                    {value:2, name:'65-69岁老人'},
                    {value:4, name:'70-79岁老人'},
                    {value:5, name:'80-89岁老人'},
					{value:7, name:'90-99岁老人'},
					{value:1, name:'100及以上'}
                ]
                
                const arrs = Object.keys(datas.data)
                console.log(arrs)
                const a = arrs[0].slice('4') -  1
                const b = arrs[1].slice('4') - 1
                const c = arrs[2].slice('4') - 1
                const d = arrs[3].slice('4') - 1
                const e = arrs[4].slice('4') - 1
                const f = arrs[5].slice('4') - 1
                data[a].value = arr[0]
                data[b].value = arr[1]
                data[c].value = arr[2]
                data[d].value = arr[3]
                data[e].value = arr[4]
                data[f].value = arr[5]
   					var myCharts = echarts.init(document.getElementById('main'));
   					var option = getCircle(data)
   					myCharts.setOption(option);
   				}
   				else {
   					console.log(data.code)
   				}
   			}
   		});
   	},
   	clickTable(code,name) {
   		console.log(code,name)
   		this.$refs.return.style.display = 'block'
   		$.ajax({
   			url:"/kjzl/sceen/sceenHuiNanAction_loadCountByAge.action",
   			dataType: 'json',
   			data: {jwcode: code},
   			success: function(datas) {
   				 const arr =  []
                for (let i in datas.data) {
                    arr.push(datas.data[i])
                }
   				
   				if (datas.code === 200) {
   					 var data = [
                    {value:2, name:'60-65岁老人'},
                    {value:2, name:'65-69岁老人'},
                    {value:4, name:'70-79岁老人'},
                    {value:5, name:'80-89岁老人'},
					{value:7, name:'90-99岁老人'},
					{value:1, name:'100及以上'}
                ]
                
                const arrs = Object.keys(datas.data)
                console.log(arrs)
                const a = arrs[0].slice('4') -  1
                const b = arrs[1].slice('4') - 1
                const c = arrs[2].slice('4') - 1
                const d = arrs[3].slice('4') - 1
                const e = arrs[4].slice('4') - 1
                const f = arrs[5].slice('4') - 1
                data[a].value = arr[0]
                data[b].value = arr[1]
                data[c].value = arr[2]
                data[d].value = arr[3]
                data[e].value = arr[4]
                data[f].value = arr[5]
   					var myCharts = echarts.init(document.getElementById('main'));
   					var option = getCircle(data)
   					myCharts.setOption(option);
   				}
   				else {
   					console.log(datas.code)
   				}
   			}
   		});
		   this.juweiHeader = name + '居委'
		   this.return = true
   	},
   	showService() {
   		var _this = this
   		$.ajax({
   			url:"/kjzl/sceen/sceenHuiNanAction_loadfwqd.action",
   			dataType: 'json',
   			success: function(data) {
   				if (data.code === 200) {
   					_this.serviceOne = data.data[0]
   					_this.serviceTwo = data.data[1]
   					_this.serviceThree = data.data[2]
   					_this.serviceFour = data.data[3]
   					_this.serviceFive = data.data[4]
   					_this.serviceSix = data.data[5]
   				}
   				else {
   					console.log('bbbb')
   				}
   			}
   		});
	   },
	   returnBack() {
		   this.showCircle()
		   this.$refs.return.style.display = 'none'
		   this.juweiHeader = '惠南镇老人分布'
	   },
	   showFourService() {
		   console.log('service')
		   var _this = this
		   $.ajax({
           url:"/kjzl/sceen/sceenHuiNanAction_loadjg.action",
           dataType: 'json',
                   success: function(data) {
	   
                      		console.log(data.data)
                           for (var i in data.data) {
                               if (i === '助餐点') {
                                   _this.zhucandian = data.data[i]
                               }
                               if (i === '老年活动室') {
                                   _this.laonianhuodong = data.data[i]
                               }
                               if (i === '为老服务单位') {
                                   _this.weilaofuwu = data.data[i]
                               }
                               if (i === '服务单位筹建点') {
	                                   _this.fuwudanwei = data.data[i]
	                               }
	                           }
	                      
		                   }
		               });
		        }
   }
  })

function getCircle(data) {
//	var myCharts = echarts.init(document.getElementById('main'));
		   option = {
		       tooltip: {//提示框，可以在全局也可以在
		           trigger: 'item',  //提示框的样式
		           formatter: "{a} <br/>{b}: {c} ({d}%)",
		           backgroundColor: 'rgba(255,255,255,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
		      	    borderColor: '#333',  //提示框的背景色
		           textStyle:{ //提示的字体样式
		               color:"black",
		           }
		       },
		       legend: {  //图例
		           orient: 'vertical',  //图例的布局，竖直    horizontal为水平
		           selectedMode: false,//控制是否可以通过点击图例改变系列的显示状态
		   		x: '28%',//图例显示在右边
		   		y: '55%',
		           data:['60-65岁老人','65-69岁老人','70-79岁老人','80-89岁老人','90-99岁老人','100及以上'],
		           textStyle:{    //图例文字的样式
		               color:'#fff',  //文字颜色
		               fontSize: 14    //文字大小
		           }
		       },
		       series: [
		           {
		               name:'老人比例',
		               type:'pie', //环形图的type和饼图相同
		               radius: ['30%', '45%'],//饼图的半径，第一个为内半径，第二个为外半径
		   			center: ['46%','34%'],
		               avoidLabelOverlap: false,
		               color:['#D1FBEF','#F9D858','#4CD0DD','#DF86F0','#F5A7C1','#CE764E'],
		               label: {
		                   normal: {  //正常的样式
		                       show: false,
		                       position: 'left'
		                   },
//		                    emphasis: { //选中时候的样式
//		                        show: true,
//		                        textStyle: {
//		                            fontSize: '20',
//		                            fontWeight: 'bold'
//		                        }
//		                    }
		               },  //提示文字
		               // labelLine: {
		               //     normal: {
		               //         show: false
		               //     }
		               // },
		               data:data
		           }
		       ]
		   };
		   return option;
//		   myCharts.setOption(option);
}
